import { useEffect } from "react";
import { Link } from "react-router-dom";
import styles from "./index.module.scss";

const TeacherSupportPage = () => {
  useEffect(() => {
    document.title = "教师专业支持 · 伊克昭儿童在线";
  }, []);

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <div className={styles.headerInner}>
          <Link to="/" aria-label="关闭" className={styles.close}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </Link>
          <div className={styles.title}>教师专业支持</div>
          <div style={{ width: 32 }} />
        </div>
      </header>

      <main className={styles.container}>
        {/* 课程理解 */}
        <section className={styles.section}>
          <div className={styles.row}>
            <div className={styles.coverWrap}>
              <img
                className={styles.cover}
                src="/teacher-support/curriculum-understanding.svg"
                alt="课程理解"
              />
              <span className={styles.badge}>课程理解</span>
            </div>
            <div className={styles.gridList}>
              <Link className={styles.pill} to="/teacher-support/curriculum-guide">课程指引</Link>
              <Link className={styles.pill} to="/teacher-support/framework-concept">课程框架理念</Link>
              <Link className={styles.pill} to="/teacher-support/theme-description">主题说明</Link>
              <Link className={styles.pill} to="/teacher-support/low-structure-activities">低结构活动实施</Link>
              <Link className={styles.pill} to="/teacher-support/children-experience">幼儿经验采访</Link>
              <Link className={styles.pill} to="/teacher-support/material-usage">材料用法详解</Link>
            </div>
          </div>
        </section>

        {/* 实施导引 */}
        <section className={styles.section}>
          <div className={styles.row}>
            <div className={styles.coverWrap}>
              <img
                className={styles.cover}
                src="/teacher-support/implementation-guidance.svg"
                alt="实施导引"
              />
              <span className={styles.badge}>实施导引</span>
            </div>
            <div className={styles.gridList}>
              <Link className={styles.pill} to="/teacher-support/environment-creation">环境创设</Link>
              <Link className={styles.pill} to="/teacher-support/activity-review">活动审议</Link>
              <Link className={styles.pill} to="/teacher-support/grouping">分组与分工</Link>
              <Link className={styles.pill} to="/teacher-support/promoting-activities">推进活动</Link>
              <Link className={styles.pill} to="/teacher-support/practice-refinement">实践凝练</Link>
              <Link className={styles.pill} to="/teacher-support/home-school">家园共育</Link>
              <Link className={styles.pill} to="/teacher-support/activity-arrangement">活动安排</Link>
              <Link className={styles.pill} to="/teacher-support/understanding-children">理解儿童</Link>
              <Link className={styles.pill} to="/teacher-support/reflective-evaluation">反思评价</Link>
            </div>
          </div>
        </section>

        {/* 案例枚举 */}
        <section className={styles.section}>
          <div className={styles.row}>
            <div className={styles.coverWrap}>
              <img
                className={styles.cover}
                src="/teacher-support/case-enumeration.svg"
                alt="案例枚举"
              />
              <span className={styles.badge}>案例枚举</span>
            </div>
            <div className={styles.gridList}>
              <Link className={styles.pill} to="/teacher-support/cases">查看案例</Link>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
};

export default TeacherSupportPage;

